<template>
  <div>
    <h1>css study</h1>
    <ul>
      <h2>flex</h2>
      <li><NuxtLink to="/flex/flexDirection">flexDirection</NuxtLink></li>
      <li><NuxtLink to="/flex/flexDirectionPractice">flexDirectionPractice</NuxtLink></li>
      <li><NuxtLink to="/flex/flexWrap">flexWrap</NuxtLink></li>
      <li><NuxtLink to="/flex/flexOrder">flexOrder</NuxtLink></li>
      <li><NuxtLink to="/flex/flexGap">flexGap</NuxtLink></li>
      <li><NuxtLink to="/flex/flexJustifyContent">flexJustifyContent</NuxtLink></li>
      <li><NuxtLink to="/flex/alignContent">alignContent</NuxtLink></li>
      <li><NuxtLink to="/flex/alignContentFlexDirection">alignContentFlexDirection</NuxtLink></li>
      <li><NuxtLink to="/flex/frogs">frogs</NuxtLink></li>
      <li><NuxtLink to="/flex/equalHeight">等高布局</NuxtLink></li>
      <li><NuxtLink to="/flex/evenlySpacedColumn">均分列（等分列）布局</NuxtLink></li>
      <li><NuxtLink to="/flex/holyGrailLayout">圣杯布局</NuxtLink></li>
      <li><NuxtLink to="/flex/stickyFooter">Sticky Footer 布局</NuxtLink></li>
    </ul>
    <ul>
      <h2>grid</h2>
      <li><NuxtLink to="/grid/defineGrid">定义网格</NuxtLink></li>
      <li><NuxtLink to="/grid/gridColumn">网格列</NuxtLink></li>
      <li><NuxtLink to="/grid/gridRows">网格行</NuxtLink></li>
      <li><NuxtLink to="/grid/gridLineNaming">网格线命名</NuxtLink></li>
      <li><NuxtLink to="/grid/gridLineNaming2">网格线命名2</NuxtLink></li>
      <li><NuxtLink to="/grid/gridLineNaming3">网格线命名3 指定网格项目的位置(数字下标和语义化索引) </NuxtLink></li>
      <li><NuxtLink to="/grid/defineGridwithAreas">使用 grid-template-areas 定义网格</NuxtLink></li>
      <li><NuxtLink to="/grid/defineGridwithAreas1">使用 grid-template-areas 定义网格 必须描述一个完整的网格，即网格上的每一个单元格都必须被填充 。</NuxtLink></li>
      <li><NuxtLink to="/grid/defineGridwithAreas2">使用 grid-template-areas 定义网格 在网格命名中可以使用一个或多个 .（U+002E），代表一个空单元格。</NuxtLink></li>
      <li><NuxtLink to="/grid/defineGridwithAreas3">使用 grid-template-areas 定义网格 在网格命名中可以使用一个或多个 .（U+002E），代表一个空单元格。</NuxtLink></li>
      <li><NuxtLink to="/grid/defineGridwithAreas4">使用 grid-template-areas 定义网格多个相同单元格命名（令牌）创建一个具有相同名称的命名网格区域。简单地说，跨行或列命名相同的网格区域名称，可以达到合并单元格的作用。</NuxtLink></li>
      <li><NuxtLink to="/grid/gridAutoRows">使用 grid-auto-rows 定义隐式表格的高 </NuxtLink></li>
      <li><NuxtLink to="/grid/gridAutoFlow">使用 grid-auto-flow 受到书写模式（writing-mode 的影响） </NuxtLink></li>
      <li><NuxtLink to="/grid/gridAutoFlow1">grid-auto-flow 取值为 row 和 column  </NuxtLink></li>
      <li><NuxtLink to="/grid/gridAutoFlow2">grid-auto-flow 取值 row 、column 、dense 、row dense 和 column dense 效果对比（dense 补位，如果没有显式设置位置，则总是先设置最近的网格缺口） </NuxtLink></li>
      <li><NuxtLink to="/grid/gridAutoFlow3">grid-auto-flow dense 照片墙 </NuxtLink></li>
      <li><NuxtLink to="/grid/gridTrackSizeSettingPercentage">网格轨道尺寸设置（百分比） </NuxtLink></li>
      <li><NuxtLink to="/grid/gridTrackSizeSettingPercentageGap">网格轨道尺寸设置（百分比）+ gap 超出容器 100% 会产生溢出 </NuxtLink></li>
      <li><NuxtLink to="/grid/gridTrackSizeSettingPercentageMargin">网格轨道尺寸设置（百分比）+ margin 容器不会溢出但是 项目的行高列宽会变化 </NuxtLink></li>
      <li><NuxtLink to="/grid/gridTrackSizeSettingFr">网格轨道尺寸设置（fr）</NuxtLink></li>
      <li><NuxtLink to="/grid/gridTrackSizeSettingFrPx">网格轨道尺寸设置（fr + px）</NuxtLink></li>
      <li><NuxtLink to="/grid/gridTrackSizeSettingFrPxGap">网格轨道尺寸设置（fr + px）+ gap</NuxtLink></li>
      <li><NuxtLink to="/grid/gridTrackSizeSettingFrPxGapFrLess">网格轨道尺寸设置（fr + px）+ gap（fr &lt; 1） </NuxtLink></li>
      <li><NuxtLink to="/grid/gridTrackSizeCalcPercentage">网格轨道尺寸计算(%） </NuxtLink></li>
      <li><NuxtLink to="/grid/gridTrackSizeCalcPercentageOverflow">网格轨道尺寸计算(%）overflow 超出 </NuxtLink></li>
      <li><NuxtLink to="/grid/gridFunctionRepeat">网格中的函数 repeat()</NuxtLink></li>
      <li><NuxtLink to="/grid/gridFunctionRepeat2List">网格中的函数 repeat() 第二个参数可以是列表</NuxtLink></li>
      <li><NuxtLink to="/grid/gridFunctionRepeat2ListName">网格中的函数 repeat() 第二个参数可以是列表且能命名网格线</NuxtLink></li>
      <li><NuxtLink to="/grid/gridFunctionRepeat1auto">网格中的函数 repeat() 第一个参数 auto-fit auto fill</NuxtLink></li>
      <li><NuxtLink to="/grid/gridFunctionRepeat1autoMinmax">网格中的函数 repeat() 第一个参数 auto-fit auto fill + minmax + fr</NuxtLink></li>
      <li><NuxtLink to="/grid/gridRAM">网格RAM（Repeat, Auto, Minmax）布局</NuxtLink></li>
      <li><NuxtLink to="/grid/gridMinmax">网格minmax函数</NuxtLink></li>
      <li><NuxtLink to="/grid/gridUsingZeroForMinimum">minmax(0, 1fr) 实现网格列等宽布局</NuxtLink></li>
      <li><NuxtLink to="/grid/gridUsingAutoForMinimum">minmax(auto, auto) 时候的表现</NuxtLink></li>
      <li><NuxtLink to="/grid/gridUsingMinContentForMinimum">minmax(min-content, min-content) 时候的表现</NuxtLink></li>
      <li><NuxtLink to="/grid/gridUsingMinContentForMinimum2">minmax() min-content 作为其中一个值时候的表现</NuxtLink></li>
      <li><NuxtLink to="/grid/gridUsingMaxContentForMinimum">minmax(max-content, max-content) 时候的表现</NuxtLink></li>
      <li><NuxtLink to="/grid/gridUsingMaxContentForMinimum2">minmax() max-content 时候的表现</NuxtLink></li>
      <li><NuxtLink to="/grid/gridRAMMin">gridRAM, 当浏览器视窗的宽度夏鸥iminmax(min,max) 的min 值的时候，浏览器会出现水平滚动条或者溢出内容被裁剪</NuxtLink></li>
      <li><NuxtLink to="/grid/gridFitContent">grid fit-content()</NuxtLink></li>
      <li><NuxtLink to="/grid/clearlyPlaceGridProjects">明确放置网格项目</NuxtLink></li>
      <li><NuxtLink to="/grid/clearlyPlaceGridProjects2">明确放置网格项目(位置放再右下角)</NuxtLink></li>
      <li><NuxtLink to="/grid/clearlyPlaceGridProjects3">明确放置网格项目(属性简写)</NuxtLink></li>
      <li><NuxtLink to="/grid/clearlyPlaceGridProjects4">明确放置网格项目(span 合并单元格后面跟合并单元格数量)</NuxtLink></li>
      <li><NuxtLink to="/grid/clearlyPlaceGridProjects5">明确放置网格项目(grid-area)</NuxtLink></li>
      <li><NuxtLink to="/grid/clearlyPlaceGridProjects6">明确放置网格项目(grid-area + span)</NuxtLink></li>
      <li><NuxtLink to="/grid/clearlyPlaceGridProjects8">使用已命名网格线名称放置网格项目</NuxtLink></li>
      <li><NuxtLink to="/grid/gridFullBleed">使用css grid 构建 web经典 fullBleed布局 </NuxtLink></li>
      <li><NuxtLink to="/grid/gridResponse">使用css grid 构建 响应式布局 </NuxtLink></li>
      <li><NuxtLink to="/grid/gridNewspaperLayout">使用css grid 报纸类布局 </NuxtLink></li>
      <li><NuxtLink to="/grid/automaticallyPlaceGridItems">自动放置网格项目 </NuxtLink></li>
      <li><NuxtLink to="/grid/automaticallyPlaceGridItemsStep1">自动放置网格项目步骤1： 创建匿名网格项目 </NuxtLink></li>
      <li><NuxtLink to="/grid/automaticallyPlaceGridItemsStep2">自动放置网格项目步骤2： 使用显式网格线条名称（或者网格区域）明确放置网格项目 </NuxtLink></li>
      <li><NuxtLink to="/grid/automaticallyPlaceGridItemsStep3">自动放置网格项目步骤3： 仅明确指定行位置 </NuxtLink></li>
      <li><NuxtLink to="/grid/automaticallyPlaceGridItemsStep4">自动放置网格项目步骤4： 确定隐式网格中的列数 </NuxtLink></li>
      <li><NuxtLink to="/grid/automaticallyPlaceGridItemsStep4">自动放置网格项目步骤5： 放置剩余的网格项目 </NuxtLink></li>
      <li><NuxtLink to="/grid/webOverlapLayout">web 重叠布局 </NuxtLink></li>
      <li><NuxtLink to="/grid/magazineLayout">使用网格构建杂志类web布局 </NuxtLink></li>
      <li><NuxtLink to="/grid/gridProjectAlignmentAlignItem">网格项目对齐（align-items） </NuxtLink></li>
      <li><NuxtLink to="/grid/gridProjectAlignmentAlignSelf">网格项目对齐（align-self） </NuxtLink></li>
      <li><NuxtLink to="/grid/gridProjectAlignmentJustifyItems">网格项目对齐（justify-items） </NuxtLink></li>
      <li><NuxtLink to="/grid/gridProjectAlignmentJustifySelf">网格项目对齐（justify-self） </NuxtLink></li>
      <li><NuxtLink to="/grid/gridHorizontallyAndVerticallyCentered">水平垂直居中（justify-self & align-self） </NuxtLink></li>
      <li><NuxtLink to="/grid/comprehensivePracticeOfGridProjectAlignment">网格项目对齐综合实践 </NuxtLink></li>
      <li><NuxtLink to="/grid/gridTrackAlignmentAlignContent">网格轨道对齐 (align-content)</NuxtLink></li>
      <li><NuxtLink to="/grid/gridTrackAlignmentAlignContentFr">网格轨道对齐 (align-content & fr)</NuxtLink></li>
      <li><NuxtLink to="/grid/gridTrackAlignmentJustifyContent">网格轨道对齐 (justify-content)</NuxtLink></li>
      <li><NuxtLink to="/grid/gridTrackAlignmentJustifyContentFr">网格轨道对齐 (justify-content & fr)</NuxtLink></li>
      <li><NuxtLink to="/grid/gridHorizontallyAndVerticallyCenteredJCAC">水平垂直居中 (justify-content & align-content)</NuxtLink></li>

      <li><NuxtLink to="/grid/gridProjectAndGridTrackAlignment">网格布局中的对齐（网格项目和轨道对齐）</NuxtLink></li>
      <li><NuxtLink to="/grid/nestingGrid">网格布局-嵌套网格</NuxtLink></li>
      <li><NuxtLink to="/grid/nestedGridVsSubGrid">网格布局-嵌套网格vs子网格(嵌套网格是单独的，而子网格共用父网格的网格轨道)</NuxtLink></li>
      <li><NuxtLink to="/grid/subGridDemo">子网格demo, 卡片对齐</NuxtLink></li>
      <li><NuxtLink to="/grid/subGridCreate">子网格 创建子网格</NuxtLink></li>
      <li><NuxtLink to="/grid/subGridCreate1">子网格 子网格影响父网格</NuxtLink></li>
      <li><NuxtLink to="/grid/subGridCreate2">子网格 子网格网格线</NuxtLink></li>
      <li><NuxtLink to="/grid/placeContentCenter">水平垂直居中（place_content:center）</NuxtLink></li>
      <li><NuxtLink to="/grid/placeContentCenterPractice">水平垂直居中练习</NuxtLink></li>
      <li><NuxtLink to="/grid/equalHeightLayout">equalHeightLayout等高布局</NuxtLink></li>

    </ul>
  </div>
</template>
<script setup lang="ts">
</script>

